<template>
    <div class="main" data-jihua-001>
        <div class="jihua-title" data-jihua-001>课程大纲及学习周期安排</div>
        <div class="collapse" data-jihua-001>
            <el-collapse v-model="activeName" accordion data-jihua-001>
                <el-collapse-item :title="'阶段'+(index+1)" :name="index+1" data-jihua-001 v-for="(item,index) in textList" :key="index">
                    <div class="collapse-main" data-jihua-001>
                        <div class="jihua-main" data-jihua-001>
                            <div class="jihua-main-left" data-jihua-001>
                                <div class="up-c" data-jihua-001 @click="scrollUp(0)">
                                    <up-c theme="outline" size="30" fill="#333" :strokeWidth="3" strokeLinejoin="bevel" strokeLinecap="butt"/>
                                </div>
                                <ul data-jihua-001 class="ul" ref="ul">
                                    <li data-jihua-001 class="left-tab" @click="changeActive(index,index2+1)" :class="activeSpan==(index2+1)?'active':''" v-for="(item2,index2) in item" :key="index2">
                                        <span data-jihua-001>第{{index2+1}}周</span>
                                    </li>
                                </ul>
                                <div class="down-c" data-jihua-001 @click="scrollDown(0)">
                                    <down-c theme="outline" size="30" fill="#333" :strokeWidth="3" strokeLinejoin="bevel" strokeLinecap="butt"/>
                                </div>
                            </div>
                            <div class="jihua-main-right" data-jihua-001 id="jihua-main-right">
                                <div class="right-text" :id="index3+1" data-jihua-001 v-for="(item3,index3) in item" :key="item3">
                                    <div class="text-body" data-jihua-001>
                                        <span class="text-body-title" data-jihua-001>课程安排</span>
                                        <p data-jihua-001 v-for="(item4,index4) in item3" :key="index4">{{item4.content}}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-collapse-item>
                <!-- <el-collapse-item title="阶段二：组件化与移动WebApp开发" name="2">
                    <div class="collapse-main" data-jihua-001>
                        <div class="title" data-jihua-001>28门课 · 课程总时长：54小时 · 辅助资料：89</div>
                        <div class="jihua-main" data-jihua-001>
                            <div class="jihua-main-left" data-jihua-001>
                                <div class="up-c" data-jihua-001 @click="scrollUp(1)">
                                    <up-c theme="outline" size="30" fill="#333" :strokeWidth="3" strokeLinejoin="bevel" strokeLinecap="butt"/>
                                </div>
                                
                                <ul data-jihua-001 class="ul" ref="ul">
                                    <li data-jihua-001 class="left-tab" @click="changeActive(1,1)" :class="activeSpan==1?'active':''">
                                        <span data-jihua-001>第十周</span>
                                    </li>
                                    <li data-jihua-001 class="left-tab" @click="changeActive(1,2)" :class="activeSpan==2?'active':''">
                                        <span data-jihua-001>第十一周</span>
                                    </li>
                                    <li data-jihua-001 class="left-tab" @click="changeActive(1,3)" :class="activeSpan==3?'active':''">
                                        <span data-jihua-001>第十二周</span>
                                    </li>
                                    <li data-jihua-001 class="left-tab" @click="changeActive(1,4)" :class="activeSpan==4?'active':''">
                                        <span data-jihua-001>第十三周</span>
                                    </li>
                                    <li data-jihua-001 class="left-tab" @click="changeActive(1,5)" :class="activeSpan==5?'active':''">
                                        <span data-jihua-001>第十四-十五周</span>
                                    </li>
                                    <li data-jihua-001 class="left-tab" @click="changeActive(1,6)" :class="activeSpan==6?'active':''">
                                        <span data-jihua-001>第十六周</span>
                                    </li>
                                    <li data-jihua-001 class="left-tab" @click="changeActive(1,7)" :class="activeSpan==7?'active':''">
                                        <span data-jihua-001>第十七周</span>
                                    </li>
                                    <li data-jihua-001 class="left-tab" @click="changeActive(1,8)" :class="activeSpan==8?'active':''">
                                        <span data-jihua-001>第十八周</span>
                                    </li>
                                    <li data-jihua-001 class="left-tab" @click="changeActive(1,9)" :class="activeSpan==9?'active':''">
                                        <span data-jihua-001>第十九周</span>
                                    </li>
                                </ul>
                                <div class="down-c" data-jihua-001 @click="scrollDown(1)">
                                    <down-c theme="outline" size="30" fill="#333" :strokeWidth="3" strokeLinejoin="bevel" strokeLinecap="butt"/>
                                </div>
                                
                            </div>
                            <div class="jihua-main-right" data-jihua-001 id="jihua-main-right">
                                <div class="right-text" id="1" data-jihua-001>
                                    <div class="text-head" data-jihua-001>
                                        <span class="text-head-title" data-jihua-001>ES6基础入门</span>
                                        <p data-jihua-001>ES6是JavaScript新的语法规范，让代码更规范、可读性高、方便操作。本周将开启ES6的学习，这是学习前端必备的一步。掌握ES6相关知识后，能够更便捷的编写代码，提高开发效率。</p>
                                    </div>
                                    <div class="text-body" data-jihua-001>
                                        <span class="text-body-title" data-jihua-001>课程安排</span>
                                        <p data-jihua-001>1、ES6基本语法与使用</p>
                                        <p data-jihua-001>2、掌握ES6中变量和常量的使用与区别</p>
                                        <p data-jihua-001>3、学习可以嵌入表达式的字符串字面量--模板字符串</p>
                                        <p data-jihua-001>4、掌握箭头函数的特点与应用</p>
                                        <p data-jihua-001>5、掌握如何自动解析数组或对象中的值</p>
                                        <p data-jihua-001>6、了解对象字面量更加简洁与灵活的表达方式</p>
                                    </div>
                                </div>
                                <div class="right-text" id="2" data-jihua-001>
                                    <div class="text-head" data-jihua-001>
                                        <span class="text-head-title" data-jihua-001>ES6语法扩展</span>
                                        <p data-jihua-001>本周将继续学习ES6的基础，通过进一步学习ES6引入的新特性，了解ES6的新方法，掌握新的集合类型，更深入的了解数据的遍历。</p>
                                    </div>
                                    <div class="text-body" data-jihua-001>
                                        <span class="text-body-title" data-jihua-001>课程安排</span>
                                        <p data-jihua-001>1、剩余参数与展开运算符的对比进行学习</p>
                                        <p data-jihua-001>2、了解如何实现减少逻辑或操作符的使用</p>
                                        <p data-jihua-001>3、认识ES6中新增的数据结构</p>
                                        <p data-jihua-001>4、了解ES6中新增的方法</p>
                                        <p data-jihua-001>5、了解遍历原理，以及学习新的循环方式</p>
                                    </div>
                                </div>
                                <div class="right-text" id="3" data-jihua-001>
                                    <div class="text-head" data-jihua-001>
                                        <span class="text-head-title" data-jihua-001>ES6之Promise与Class类</span>
                                        <p data-jihua-001>Promise 和 Class（类）是ES6中非常重要的知识点。Promise 是异步编程的一种解决方案，比传统的回调函数更合理和更强大。Class（类）来作为对象的模板使用，强化面向对象的使用。</p>
                                    </div>
                                    <div class="text-body" data-jihua-001>
                                        <span class="text-body-title" data-jihua-001>课程安排</span>
                                        <p data-jihua-001>1、学习如何高效解决回调地域问题</p>
                                        <p data-jihua-001>2、了解如何运用ES6 Promise进行异步编程</p>
                                        <p data-jihua-001>3、掌握Class基本语法的使用</p>
                                        <p data-jihua-001>4、掌握更加清晰与便捷的对象继承方式</p>
                                        <p data-jihua-001>5、掌握更高级的面向对象编程思想</p>
                                    </div>
                                </div>
                                <div class="right-text" id="4" data-jihua-001>
                                    <div class="text-head" data-jihua-001>
                                        <span class="text-head-title" data-jihua-001>ES6之Module模块与Babel编译</span>
                                        <p data-jihua-001>ES6 在语言标准的层面上，实现了模块功能。可以实现将一个大程序拆分成互相依赖的小文件。而babel的使用，完美的解决了ES6的兼容性问题，让ES6有更多可能性，使前后端差异越来越小。</p>
                                    </div>
                                    <div class="text-body" data-jihua-001>
                                        <span class="text-body-title" data-jihua-001>课程安排</span>
                                        <p data-jihua-001>1、了解企业级的开发形式——模块化的使用</p>
                                        <p data-jihua-001>2、学习将一个复杂的功能拆分，从而提高复用率</p>
                                        <p data-jihua-001>3、了解如何更好的维护代码</p>
                                        <p data-jihua-001>4、掌握babel转换器的使用，解决ES6的兼容问题</p>
                                        <p data-jihua-001>5、学习如何将Webpack与配合Babel使用，完成更高效的开发</p>
                                        <p data-jihua-001>6、掌握Webpack项目构建配置</p>
                                    </div>
                                </div>
                                <div class="right-text" id="5" data-jihua-001>
                                    <div class="text-head" data-jihua-001>
                                        <span class="text-head-title" data-jihua-001>HTTP 协议、存储、Ajax</span>
                                        <p data-jihua-001>本周将开启前后端数据交互的学习，来理解前后端开发的区别，了解网络通信的相关概念，并对与后台通信、获取数据有一个初体验。概念比较抽象，先作为了解。在后面项目开发环节，随着对知识的运用，对概念会有更深一步的理解。</p>
                                    </div>
                                    <div class="text-body" data-jihua-001>
                                        <span class="text-body-title" data-jihua-001>课程安排</span>
                                        <p data-jihua-001>1、了解如何区分前后端</p>
                                        <p data-jihua-001>2、理解HTTP协议，熟悉网络通信相关概念</p>
                                        <p data-jihua-001>3、学习本地存储的多种方式，了解数据缓存机制</p>
                                        <p data-jihua-001>4、了解JSON数据的几种书写格式</p>
                                        <p data-jihua-001>5、熟悉原生Ajax请求流程与细节</p>
                                        <p data-jihua-001>6、掌握常见的跨域技巧</p>
                                        <p data-jihua-001>7、学习如何自己封装Ajax</p>
                                        <p data-jihua-001>8、了解基于promise的Ajax插件——Axios</p>
                                    </div>
                                </div>
                                <div class="right-text" id="6" data-jihua-001>
                                    <div class="text-head" data-jihua-001>
                                        <span class="text-head-title" data-jihua-001>项目实战：仿穷游组件化开发</span>
                                        <p data-jihua-001>组件化开发是一种高级编程思想，适用于团队协作开发，是企业中常见的一种开发模式。本周会使用组件化方式来完成“仿穷游商城首页”的重构。掌握组件化开发能够更好的促进团队协作，提高开发和调试效率，可维护性更高。</p>
                                    </div>
                                    <div class="text-body" data-jihua-001>
                                        <span class="text-body-title" data-jihua-001>课程安排</span>
                                        <p data-jihua-001>1、综合运用H5/CSS3/ES6等知识，使用“组件化的开发思想”重构旅游网首页</p>
                                        <p data-jihua-001>2、了解项目组件化划分方式</p>
                                        <p data-jihua-001>3、了解模块化与组件化区别</p>
                                        <p data-jihua-001>4、采用模块化与组件化结合的开发方式</p>
                                        <p data-jihua-001>5、使用Webpack构建项目</p>
                                        <p data-jihua-001>6、运用 art-template 模板引擎，高效开发</p>
                                        <p data-jihua-001>7、真实的数据接口，实现前后台联动</p>
                                        <p data-jihua-001>8、通过自己封装的Ajax向后端请求数据</p>
                                        <p data-jihua-001>9、使用Class、Module模块完成轮播图的基类，实现模块化，提高复用率</p>
                                    </div>
                                </div>
                                <div class="right-text" id="7" data-jihua-001>
                                    <div class="text-head" data-jihua-001>
                                        <span class="text-head-title" data-jihua-001>移动基础</span>
                                        <p data-jihua-001>移动开发基础是进行webApp开发第一步。本周将开启前端学习的新篇章。通过移动端基础知识的学习，能够独立实现适配不同移动端终端的页面。</p>
                                    </div>
                                    <div class="text-body" data-jihua-001>
                                        <span class="text-body-title" data-jihua-001>课程安排</span>
                                        <p data-jihua-001>1、了解移动基础概念</p>
                                        <p data-jihua-001>2、了解移动端屏幕、移动端浏览器、操作系统的不同</p>
                                        <p data-jihua-001>3、掌握Flex布局的使用</p>
                                        <p data-jihua-001>4、掌握移动端常用的rem和vw适配方案</p>
                                        <p data-jihua-001>5、学习流体布局的使用</p>
                                    </div>
                                </div>
                                <div class="right-text" id="8" data-jihua-001>
                                    <div class="text-head" data-jihua-001>
                                        <span class="text-head-title" data-jihua-001>移动进阶之高效开发</span>
                                        <p data-jihua-001>移动端高质量的开发，是移动端开发的必备技能。本周继续移动端的学习，学习移动端的事件、开发中的常见问题，以及如何使项目的性能更加优化。</p>
                                    </div>
                                    <div class="text-body" data-jihua-001>
                                        <span class="text-body-title" data-jihua-001>课程安排</span>
                                        <p data-jihua-001>1、掌握移动端常用的touch事件</p>
                                        <p data-jihua-001>2、掌握Grid网格布局</p>
                                        <p data-jihua-001>3、学习响应式布局</p>
                                        <p data-jihua-001>4、移动端开发中常见的问题</p>
                                        <p data-jihua-001>5、学习如何从HTML、CSS、JavaScript三方面优化性能</p>
                                    </div>
                                </div>
                                <div class="right-text" id="9" data-jihua-001>
                                    <div class="text-head" data-jihua-001>
                                        <span class="text-head-title" data-jihua-001>项目实战：仿穷游移动webapp开发</span>
                                        <p data-jihua-001>接下来的一周，我们将迎来webApp项目的开发，实现从PC端开发迈向移动端。从项目分析、组件划分、结构搭建、功能实现、性能优化。体验真实企业中移动端项目的开发流程。</p>
                                    </div>
                                    <div class="text-body" data-jihua-001>
                                        <span class="text-body-title" data-jihua-001>课程安排</span>
                                        <p data-jihua-001>1、综合运用H5/CSS3/ES6/移动知识，重构旅游网WebAPP的首页、目的地页</p>
                                        <p data-jihua-001>2、符合企业标准的开发流程，从项目分析、项目搭建、模块开发到数据对接</p>
                                        <p data-jihua-001>3、采用模块化与组件化结合的开发方式</p>
                                        <p data-jihua-001>4、使用Webpack构建项目</p>
                                        <p data-jihua-001>5、运用 art-template 模板引擎，高效开发。</p>
                                        <p data-jihua-001>6、完成 18 个典型组件开发（搜索、商品、导航等组件）</p>
                                        <p data-jihua-001>7、运用Swiper高效移动端插件开发轮播图</p>
                                        <p data-jihua-001>8、使用Ajax 处理与获取数据</p>
                                        <p data-jihua-001>9、如何处理多次请求的解决方案</p>
                                        <p data-jihua-001>10、如何运用组件化思维，拆分和复用组件</p>
                                        <p data-jihua-001>11、完成各组件性能的优化</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-collapse-item>
                <el-collapse-item title="阶段三：小程序与Vue3.x全栈开发" name="3">
                    <div class="collapse-main" data-jihua-001>
                        <div class="title" data-jihua-001>28门课 · 课程总时长：54小时 · 辅助资料：89</div>
                        <div class="jihua-main" data-jihua-001>
                            <div class="jihua-main-left" data-jihua-001>
                                <div class="up-c" data-jihua-001 @click="scrollUp(2)">
                                    <up-c theme="outline" size="30" fill="#333" :strokeWidth="3" strokeLinejoin="bevel" strokeLinecap="butt"/>
                                </div>
                                
                                <ul data-jihua-001 class="ul" ref="ul">
                                    <li data-jihua-001 class="left-tab" @click="changeActive(2,1)" :class="activeSpan==1?'active':''">
                                        <span data-jihua-001>第十周</span>
                                    </li>
                                    <li data-jihua-001 class="left-tab" @click="changeActive(2,2)" :class="activeSpan==2?'active':''">
                                        <span data-jihua-001>第十一周</span>
                                    </li>
                                    <li data-jihua-001 class="left-tab" @click="changeActive(2,3)" :class="activeSpan==3?'active':''">
                                        <span data-jihua-001>第十二周</span>
                                    </li>
                                    <li data-jihua-001 class="left-tab" @click="changeActive(2,4)" :class="activeSpan==4?'active':''">
                                        <span data-jihua-001>第十三周</span>
                                    </li>
                                    <li data-jihua-001 class="left-tab" @click="changeActive(2,5)" :class="activeSpan==5?'active':''">
                                        <span data-jihua-001>第十四-十五周</span>
                                    </li>
                                    <li data-jihua-001 class="left-tab" @click="changeActive(2,6)" :class="activeSpan==6?'active':''">
                                        <span data-jihua-001>第十六周</span>
                                    </li>
                                    <li data-jihua-001 class="left-tab" @click="changeActive(2,7)" :class="activeSpan==7?'active':''">
                                        <span data-jihua-001>第十七周</span>
                                    </li>
                                    <li data-jihua-001 class="left-tab" @click="changeActive(2,8)" :class="activeSpan==8?'active':''">
                                        <span data-jihua-001>第十八周</span>
                                    </li>
                                    <li data-jihua-001 class="left-tab" @click="changeActive(2,9)" :class="activeSpan==9?'active':''">
                                        <span data-jihua-001>第十九周</span>
                                    </li>
                                </ul>
                                <div class="down-c" data-jihua-001 @click="scrollDown(2)">
                                    <down-c theme="outline" size="30" fill="#333" :strokeWidth="3" strokeLinejoin="bevel" strokeLinecap="butt"/>
                                </div>
                                
                            </div>
                            <div class="jihua-main-right" data-jihua-001 id="jihua-main-right">
                                <div class="right-text" id="1" data-jihua-001>
                                    <div class="text-head" data-jihua-001>
                                        <span class="text-head-title" data-jihua-001>ES6基础入门</span>
                                        <p data-jihua-001>ES6是JavaScript新的语法规范，让代码更规范、可读性高、方便操作。本周将开启ES6的学习，这是学习前端必备的一步。掌握ES6相关知识后，能够更便捷的编写代码，提高开发效率。</p>
                                    </div>
                                    <div class="text-body" data-jihua-001>
                                        <span class="text-body-title" data-jihua-001>课程安排</span>
                                        <p data-jihua-001>1、ES6基本语法与使用</p>
                                        <p data-jihua-001>2、掌握ES6中变量和常量的使用与区别</p>
                                        <p data-jihua-001>3、学习可以嵌入表达式的字符串字面量--模板字符串</p>
                                        <p data-jihua-001>4、掌握箭头函数的特点与应用</p>
                                        <p data-jihua-001>5、掌握如何自动解析数组或对象中的值</p>
                                        <p data-jihua-001>6、了解对象字面量更加简洁与灵活的表达方式</p>
                                    </div>
                                </div>
                                <div class="right-text" id="2" data-jihua-001>
                                    <div class="text-head" data-jihua-001>
                                        <span class="text-head-title" data-jihua-001>ES6语法扩展</span>
                                        <p data-jihua-001>本周将继续学习ES6的基础，通过进一步学习ES6引入的新特性，了解ES6的新方法，掌握新的集合类型，更深入的了解数据的遍历。</p>
                                    </div>
                                    <div class="text-body" data-jihua-001>
                                        <span class="text-body-title" data-jihua-001>课程安排</span>
                                        <p data-jihua-001>1、剩余参数与展开运算符的对比进行学习</p>
                                        <p data-jihua-001>2、了解如何实现减少逻辑或操作符的使用</p>
                                        <p data-jihua-001>3、认识ES6中新增的数据结构</p>
                                        <p data-jihua-001>4、了解ES6中新增的方法</p>
                                        <p data-jihua-001>5、了解遍历原理，以及学习新的循环方式</p>
                                    </div>
                                </div>
                                <div class="right-text" id="3" data-jihua-001>
                                    <div class="text-head" data-jihua-001>
                                        <span class="text-head-title" data-jihua-001>ES6之Promise与Class类</span>
                                        <p data-jihua-001>Promise 和 Class（类）是ES6中非常重要的知识点。Promise 是异步编程的一种解决方案，比传统的回调函数更合理和更强大。Class（类）来作为对象的模板使用，强化面向对象的使用。</p>
                                    </div>
                                    <div class="text-body" data-jihua-001>
                                        <span class="text-body-title" data-jihua-001>课程安排</span>
                                        <p data-jihua-001>1、学习如何高效解决回调地域问题</p>
                                        <p data-jihua-001>2、了解如何运用ES6 Promise进行异步编程</p>
                                        <p data-jihua-001>3、掌握Class基本语法的使用</p>
                                        <p data-jihua-001>4、掌握更加清晰与便捷的对象继承方式</p>
                                        <p data-jihua-001>5、掌握更高级的面向对象编程思想</p>
                                    </div>
                                </div>
                                <div class="right-text" id="4" data-jihua-001>
                                    <div class="text-head" data-jihua-001>
                                        <span class="text-head-title" data-jihua-001>ES6之Module模块与Babel编译</span>
                                        <p data-jihua-001>ES6 在语言标准的层面上，实现了模块功能。可以实现将一个大程序拆分成互相依赖的小文件。而babel的使用，完美的解决了ES6的兼容性问题，让ES6有更多可能性，使前后端差异越来越小。</p>
                                    </div>
                                    <div class="text-body" data-jihua-001>
                                        <span class="text-body-title" data-jihua-001>课程安排</span>
                                        <p data-jihua-001>1、了解企业级的开发形式——模块化的使用</p>
                                        <p data-jihua-001>2、学习将一个复杂的功能拆分，从而提高复用率</p>
                                        <p data-jihua-001>3、了解如何更好的维护代码</p>
                                        <p data-jihua-001>4、掌握babel转换器的使用，解决ES6的兼容问题</p>
                                        <p data-jihua-001>5、学习如何将Webpack与配合Babel使用，完成更高效的开发</p>
                                        <p data-jihua-001>6、掌握Webpack项目构建配置</p>
                                    </div>
                                </div>
                                <div class="right-text" id="5" data-jihua-001>
                                    <div class="text-head" data-jihua-001>
                                        <span class="text-head-title" data-jihua-001>HTTP 协议、存储、Ajax</span>
                                        <p data-jihua-001>本周将开启前后端数据交互的学习，来理解前后端开发的区别，了解网络通信的相关概念，并对与后台通信、获取数据有一个初体验。概念比较抽象，先作为了解。在后面项目开发环节，随着对知识的运用，对概念会有更深一步的理解。</p>
                                    </div>
                                    <div class="text-body" data-jihua-001>
                                        <span class="text-body-title" data-jihua-001>课程安排</span>
                                        <p data-jihua-001>1、了解如何区分前后端</p>
                                        <p data-jihua-001>2、理解HTTP协议，熟悉网络通信相关概念</p>
                                        <p data-jihua-001>3、学习本地存储的多种方式，了解数据缓存机制</p>
                                        <p data-jihua-001>4、了解JSON数据的几种书写格式</p>
                                        <p data-jihua-001>5、熟悉原生Ajax请求流程与细节</p>
                                        <p data-jihua-001>6、掌握常见的跨域技巧</p>
                                        <p data-jihua-001>7、学习如何自己封装Ajax</p>
                                        <p data-jihua-001>8、了解基于promise的Ajax插件——Axios</p>
                                    </div>
                                </div>
                                <div class="right-text" id="6" data-jihua-001>
                                    <div class="text-head" data-jihua-001>
                                        <span class="text-head-title" data-jihua-001>项目实战：仿穷游组件化开发</span>
                                        <p data-jihua-001>组件化开发是一种高级编程思想，适用于团队协作开发，是企业中常见的一种开发模式。本周会使用组件化方式来完成“仿穷游商城首页”的重构。掌握组件化开发能够更好的促进团队协作，提高开发和调试效率，可维护性更高。</p>
                                    </div>
                                    <div class="text-body" data-jihua-001>
                                        <span class="text-body-title" data-jihua-001>课程安排</span>
                                        <p data-jihua-001>1、综合运用H5/CSS3/ES6等知识，使用“组件化的开发思想”重构旅游网首页</p>
                                        <p data-jihua-001>2、了解项目组件化划分方式</p>
                                        <p data-jihua-001>3、了解模块化与组件化区别</p>
                                        <p data-jihua-001>4、采用模块化与组件化结合的开发方式</p>
                                        <p data-jihua-001>5、使用Webpack构建项目</p>
                                        <p data-jihua-001>6、运用 art-template 模板引擎，高效开发</p>
                                        <p data-jihua-001>7、真实的数据接口，实现前后台联动</p>
                                        <p data-jihua-001>8、通过自己封装的Ajax向后端请求数据</p>
                                        <p data-jihua-001>9、使用Class、Module模块完成轮播图的基类，实现模块化，提高复用率</p>
                                    </div>
                                </div>
                                <div class="right-text" id="7" data-jihua-001>
                                    <div class="text-head" data-jihua-001>
                                        <span class="text-head-title" data-jihua-001>移动基础</span>
                                        <p data-jihua-001>移动开发基础是进行webApp开发第一步。本周将开启前端学习的新篇章。通过移动端基础知识的学习，能够独立实现适配不同移动端终端的页面。</p>
                                    </div>
                                    <div class="text-body" data-jihua-001>
                                        <span class="text-body-title" data-jihua-001>课程安排</span>
                                        <p data-jihua-001>1、了解移动基础概念</p>
                                        <p data-jihua-001>2、了解移动端屏幕、移动端浏览器、操作系统的不同</p>
                                        <p data-jihua-001>3、掌握Flex布局的使用</p>
                                        <p data-jihua-001>4、掌握移动端常用的rem和vw适配方案</p>
                                        <p data-jihua-001>5、学习流体布局的使用</p>
                                    </div>
                                </div>
                                <div class="right-text" id="8" data-jihua-001>
                                    <div class="text-head" data-jihua-001>
                                        <span class="text-head-title" data-jihua-001>移动进阶之高效开发</span>
                                        <p data-jihua-001>移动端高质量的开发，是移动端开发的必备技能。本周继续移动端的学习，学习移动端的事件、开发中的常见问题，以及如何使项目的性能更加优化。</p>
                                    </div>
                                    <div class="text-body" data-jihua-001>
                                        <span class="text-body-title" data-jihua-001>课程安排</span>
                                        <p data-jihua-001>1、掌握移动端常用的touch事件</p>
                                        <p data-jihua-001>2、掌握Grid网格布局</p>
                                        <p data-jihua-001>3、学习响应式布局</p>
                                        <p data-jihua-001>4、移动端开发中常见的问题</p>
                                        <p data-jihua-001>5、学习如何从HTML、CSS、JavaScript三方面优化性能</p>
                                    </div>
                                </div>
                                <div class="right-text" id="9" data-jihua-001>
                                    <div class="text-head" data-jihua-001>
                                        <span class="text-head-title" data-jihua-001>项目实战：仿穷游移动webapp开发</span>
                                        <p data-jihua-001>接下来的一周，我们将迎来webApp项目的开发，实现从PC端开发迈向移动端。从项目分析、组件划分、结构搭建、功能实现、性能优化。体验真实企业中移动端项目的开发流程。</p>
                                    </div>
                                    <div class="text-body" data-jihua-001>
                                        <span class="text-body-title" data-jihua-001>课程安排</span>
                                        <p data-jihua-001>1、综合运用H5/CSS3/ES6/移动知识，重构旅游网WebAPP的首页、目的地页</p>
                                        <p data-jihua-001>2、符合企业标准的开发流程，从项目分析、项目搭建、模块开发到数据对接</p>
                                        <p data-jihua-001>3、采用模块化与组件化结合的开发方式</p>
                                        <p data-jihua-001>4、使用Webpack构建项目</p>
                                        <p data-jihua-001>5、运用 art-template 模板引擎，高效开发。</p>
                                        <p data-jihua-001>6、完成 18 个典型组件开发（搜索、商品、导航等组件）</p>
                                        <p data-jihua-001>7、运用Swiper高效移动端插件开发轮播图</p>
                                        <p data-jihua-001>8、使用Ajax 处理与获取数据</p>
                                        <p data-jihua-001>9、如何处理多次请求的解决方案</p>
                                        <p data-jihua-001>10、如何运用组件化思维，拆分和复用组件</p>
                                        <p data-jihua-001>11、完成各组件性能的优化</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-collapse-item>
                <el-collapse-item title="阶段四：TS&ReactJS开发与工程化构造" name="4">
                    <div class="collapse-main" data-jihua-001>
                        <div class="title" data-jihua-001>28门课 · 课程总时长：54小时 · 辅助资料：89</div>
                        <div class="jihua-main" data-jihua-001>
                            <div class="jihua-main-left" data-jihua-001>
                                <div class="up-c" data-jihua-001 @click="scrollUp(3)">
                                    <up-c theme="outline" size="30" fill="#333" :strokeWidth="3" strokeLinejoin="bevel" strokeLinecap="butt"/>
                                </div>
                                
                                <ul data-jihua-001 class="ul" ref="ul">
                                    <li data-jihua-001 class="left-tab" @click="changeActive(3,1)" :class="activeSpan==1?'active':''">
                                        <span data-jihua-001>第十周</span>
                                    </li>
                                    <li data-jihua-001 class="left-tab" @click="changeActive(3,2)" :class="activeSpan==2?'active':''">
                                        <span data-jihua-001>第十一周</span>
                                    </li>
                                    <li data-jihua-001 class="left-tab" @click="changeActive(3,3)" :class="activeSpan==3?'active':''">
                                        <span data-jihua-001>第十二周</span>
                                    </li>
                                    <li data-jihua-001 class="left-tab" @click="changeActive(3,4)" :class="activeSpan==4?'active':''">
                                        <span data-jihua-001>第十三周</span>
                                    </li>
                                    <li data-jihua-001 class="left-tab" @click="changeActive(3,5)" :class="activeSpan==5?'active':''">
                                        <span data-jihua-001>第十四-十五周</span>
                                    </li>
                                    <li data-jihua-001 class="left-tab" @click="changeActive(3,6)" :class="activeSpan==6?'active':''">
                                        <span data-jihua-001>第十六周</span>
                                    </li>
                                    <li data-jihua-001 class="left-tab" @click="changeActive(3,7)" :class="activeSpan==7?'active':''">
                                        <span data-jihua-001>第十七周</span>
                                    </li>
                                    <li data-jihua-001 class="left-tab" @click="changeActive(3,8)" :class="activeSpan==8?'active':''">
                                        <span data-jihua-001>第十八周</span>
                                    </li>
                                    <li data-jihua-001 class="left-tab" @click="changeActive(3,9)" :class="activeSpan==9?'active':''">
                                        <span data-jihua-001>第十九周</span>
                                    </li>
                                </ul>
                                <div class="down-c" data-jihua-001 @click="scrollDown(3)">
                                    <down-c theme="outline" size="30" fill="#333" :strokeWidth="3" strokeLinejoin="bevel" strokeLinecap="butt"/>
                                </div>
                                
                            </div>
                            <div class="jihua-main-right" data-jihua-001 id="jihua-main-right">
                                <div class="right-text" id="1" data-jihua-001>
                                    <div class="text-head" data-jihua-001>
                                        <span class="text-head-title" data-jihua-001>ES6基础入门</span>
                                        <p data-jihua-001>ES6是JavaScript新的语法规范，让代码更规范、可读性高、方便操作。本周将开启ES6的学习，这是学习前端必备的一步。掌握ES6相关知识后，能够更便捷的编写代码，提高开发效率。</p>
                                    </div>
                                    <div class="text-body" data-jihua-001>
                                        <span class="text-body-title" data-jihua-001>课程安排</span>
                                        <p data-jihua-001>1、ES6基本语法与使用</p>
                                        <p data-jihua-001>2、掌握ES6中变量和常量的使用与区别</p>
                                        <p data-jihua-001>3、学习可以嵌入表达式的字符串字面量--模板字符串</p>
                                        <p data-jihua-001>4、掌握箭头函数的特点与应用</p>
                                        <p data-jihua-001>5、掌握如何自动解析数组或对象中的值</p>
                                        <p data-jihua-001>6、了解对象字面量更加简洁与灵活的表达方式</p>
                                    </div>
                                </div>
                                <div class="right-text" id="2" data-jihua-001>
                                    <div class="text-head" data-jihua-001>
                                        <span class="text-head-title" data-jihua-001>ES6语法扩展</span>
                                        <p data-jihua-001>本周将继续学习ES6的基础，通过进一步学习ES6引入的新特性，了解ES6的新方法，掌握新的集合类型，更深入的了解数据的遍历。</p>
                                    </div>
                                    <div class="text-body" data-jihua-001>
                                        <span class="text-body-title" data-jihua-001>课程安排</span>
                                        <p data-jihua-001>1、剩余参数与展开运算符的对比进行学习</p>
                                        <p data-jihua-001>2、了解如何实现减少逻辑或操作符的使用</p>
                                        <p data-jihua-001>3、认识ES6中新增的数据结构</p>
                                        <p data-jihua-001>4、了解ES6中新增的方法</p>
                                        <p data-jihua-001>5、了解遍历原理，以及学习新的循环方式</p>
                                    </div>
                                </div>
                                <div class="right-text" id="3" data-jihua-001>
                                    <div class="text-head" data-jihua-001>
                                        <span class="text-head-title" data-jihua-001>ES6之Promise与Class类</span>
                                        <p data-jihua-001>Promise 和 Class（类）是ES6中非常重要的知识点。Promise 是异步编程的一种解决方案，比传统的回调函数更合理和更强大。Class（类）来作为对象的模板使用，强化面向对象的使用。</p>
                                    </div>
                                    <div class="text-body" data-jihua-001>
                                        <span class="text-body-title" data-jihua-001>课程安排</span>
                                        <p data-jihua-001>1、学习如何高效解决回调地域问题</p>
                                        <p data-jihua-001>2、了解如何运用ES6 Promise进行异步编程</p>
                                        <p data-jihua-001>3、掌握Class基本语法的使用</p>
                                        <p data-jihua-001>4、掌握更加清晰与便捷的对象继承方式</p>
                                        <p data-jihua-001>5、掌握更高级的面向对象编程思想</p>
                                    </div>
                                </div>
                                <div class="right-text" id="4" data-jihua-001>
                                    <div class="text-head" data-jihua-001>
                                        <span class="text-head-title" data-jihua-001>ES6之Module模块与Babel编译</span>
                                        <p data-jihua-001>ES6 在语言标准的层面上，实现了模块功能。可以实现将一个大程序拆分成互相依赖的小文件。而babel的使用，完美的解决了ES6的兼容性问题，让ES6有更多可能性，使前后端差异越来越小。</p>
                                    </div>
                                    <div class="text-body" data-jihua-001>
                                        <span class="text-body-title" data-jihua-001>课程安排</span>
                                        <p data-jihua-001>1、了解企业级的开发形式——模块化的使用</p>
                                        <p data-jihua-001>2、学习将一个复杂的功能拆分，从而提高复用率</p>
                                        <p data-jihua-001>3、了解如何更好的维护代码</p>
                                        <p data-jihua-001>4、掌握babel转换器的使用，解决ES6的兼容问题</p>
                                        <p data-jihua-001>5、学习如何将Webpack与配合Babel使用，完成更高效的开发</p>
                                        <p data-jihua-001>6、掌握Webpack项目构建配置</p>
                                    </div>
                                </div>
                                <div class="right-text" id="5" data-jihua-001>
                                    <div class="text-head" data-jihua-001>
                                        <span class="text-head-title" data-jihua-001>HTTP 协议、存储、Ajax</span>
                                        <p data-jihua-001>本周将开启前后端数据交互的学习，来理解前后端开发的区别，了解网络通信的相关概念，并对与后台通信、获取数据有一个初体验。概念比较抽象，先作为了解。在后面项目开发环节，随着对知识的运用，对概念会有更深一步的理解。</p>
                                    </div>
                                    <div class="text-body" data-jihua-001>
                                        <span class="text-body-title" data-jihua-001>课程安排</span>
                                        <p data-jihua-001>1、了解如何区分前后端</p>
                                        <p data-jihua-001>2、理解HTTP协议，熟悉网络通信相关概念</p>
                                        <p data-jihua-001>3、学习本地存储的多种方式，了解数据缓存机制</p>
                                        <p data-jihua-001>4、了解JSON数据的几种书写格式</p>
                                        <p data-jihua-001>5、熟悉原生Ajax请求流程与细节</p>
                                        <p data-jihua-001>6、掌握常见的跨域技巧</p>
                                        <p data-jihua-001>7、学习如何自己封装Ajax</p>
                                        <p data-jihua-001>8、了解基于promise的Ajax插件——Axios</p>
                                    </div>
                                </div>
                                <div class="right-text" id="6" data-jihua-001>
                                    <div class="text-head" data-jihua-001>
                                        <span class="text-head-title" data-jihua-001>项目实战：仿穷游组件化开发</span>
                                        <p data-jihua-001>组件化开发是一种高级编程思想，适用于团队协作开发，是企业中常见的一种开发模式。本周会使用组件化方式来完成“仿穷游商城首页”的重构。掌握组件化开发能够更好的促进团队协作，提高开发和调试效率，可维护性更高。</p>
                                    </div>
                                    <div class="text-body" data-jihua-001>
                                        <span class="text-body-title" data-jihua-001>课程安排</span>
                                        <p data-jihua-001>1、综合运用H5/CSS3/ES6等知识，使用“组件化的开发思想”重构旅游网首页</p>
                                        <p data-jihua-001>2、了解项目组件化划分方式</p>
                                        <p data-jihua-001>3、了解模块化与组件化区别</p>
                                        <p data-jihua-001>4、采用模块化与组件化结合的开发方式</p>
                                        <p data-jihua-001>5、使用Webpack构建项目</p>
                                        <p data-jihua-001>6、运用 art-template 模板引擎，高效开发</p>
                                        <p data-jihua-001>7、真实的数据接口，实现前后台联动</p>
                                        <p data-jihua-001>8、通过自己封装的Ajax向后端请求数据</p>
                                        <p data-jihua-001>9、使用Class、Module模块完成轮播图的基类，实现模块化，提高复用率</p>
                                    </div>
                                </div>
                                <div class="right-text" id="7" data-jihua-001>
                                    <div class="text-head" data-jihua-001>
                                        <span class="text-head-title" data-jihua-001>移动基础</span>
                                        <p data-jihua-001>移动开发基础是进行webApp开发第一步。本周将开启前端学习的新篇章。通过移动端基础知识的学习，能够独立实现适配不同移动端终端的页面。</p>
                                    </div>
                                    <div class="text-body" data-jihua-001>
                                        <span class="text-body-title" data-jihua-001>课程安排</span>
                                        <p data-jihua-001>1、了解移动基础概念</p>
                                        <p data-jihua-001>2、了解移动端屏幕、移动端浏览器、操作系统的不同</p>
                                        <p data-jihua-001>3、掌握Flex布局的使用</p>
                                        <p data-jihua-001>4、掌握移动端常用的rem和vw适配方案</p>
                                        <p data-jihua-001>5、学习流体布局的使用</p>
                                    </div>
                                </div>
                                <div class="right-text" id="8" data-jihua-001>
                                    <div class="text-head" data-jihua-001>
                                        <span class="text-head-title" data-jihua-001>移动进阶之高效开发</span>
                                        <p data-jihua-001>移动端高质量的开发，是移动端开发的必备技能。本周继续移动端的学习，学习移动端的事件、开发中的常见问题，以及如何使项目的性能更加优化。</p>
                                    </div>
                                    <div class="text-body" data-jihua-001>
                                        <span class="text-body-title" data-jihua-001>课程安排</span>
                                        <p data-jihua-001>1、掌握移动端常用的touch事件</p>
                                        <p data-jihua-001>2、掌握Grid网格布局</p>
                                        <p data-jihua-001>3、学习响应式布局</p>
                                        <p data-jihua-001>4、移动端开发中常见的问题</p>
                                        <p data-jihua-001>5、学习如何从HTML、CSS、JavaScript三方面优化性能</p>
                                    </div>
                                </div>
                                <div class="right-text" id="9" data-jihua-001>
                                    <div class="text-head" data-jihua-001>
                                        <span class="text-head-title" data-jihua-001>项目实战：仿穷游移动webapp开发</span>
                                        <p data-jihua-001>接下来的一周，我们将迎来webApp项目的开发，实现从PC端开发迈向移动端。从项目分析、组件划分、结构搭建、功能实现、性能优化。体验真实企业中移动端项目的开发流程。</p>
                                    </div>
                                    <div class="text-body" data-jihua-001>
                                        <span class="text-body-title" data-jihua-001>课程安排</span>
                                        <p data-jihua-001>1、综合运用H5/CSS3/ES6/移动知识，重构旅游网WebAPP的首页、目的地页</p>
                                        <p data-jihua-001>2、符合企业标准的开发流程，从项目分析、项目搭建、模块开发到数据对接</p>
                                        <p data-jihua-001>3、采用模块化与组件化结合的开发方式</p>
                                        <p data-jihua-001>4、使用Webpack构建项目</p>
                                        <p data-jihua-001>5、运用 art-template 模板引擎，高效开发。</p>
                                        <p data-jihua-001>6、完成 18 个典型组件开发（搜索、商品、导航等组件）</p>
                                        <p data-jihua-001>7、运用Swiper高效移动端插件开发轮播图</p>
                                        <p data-jihua-001>8、使用Ajax 处理与获取数据</p>
                                        <p data-jihua-001>9、如何处理多次请求的解决方案</p>
                                        <p data-jihua-001>10、如何运用组件化思维，拆分和复用组件</p>
                                        <p data-jihua-001>11、完成各组件性能的优化</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-collapse-item> -->
            </el-collapse>
        </div>
    </div>
</template>
<script>
import {DownC,UpC} from '@icon-park/vue';
export default {
    components:{
        DownC,UpC
    },
    data() {
        return {
            activeName: '1',
            activeSpan:1,
            textList:''
        };
    },
    methods:{
        initActiveSpan(){
            console.log('ok');
            var that=this
            var tabs = document.getElementsByClassName('el-collapse-item__header')
            console.log(tabs);
            for(var i=0;i<tabs.length;i++){
                tabs[i].addEventListener('click',function(){
                    that.activeSpan=1
                    console.log('okk');
                })
            }
        },
        changeActive(fatheri,soni){
            console.log(fatheri,soni);
            this.activeSpan=soni
            var container = document.getElementsByClassName('jihua-main-right')
            console.log(container);
            var divs = container[fatheri].getElementsByClassName('right-text')
            // console.log(divs);
            for(var j=0;j<divs.length;j++){
                divs[j].style.display='none'
            }
            divs[soni-1].style.display='block'
        },
        scrollUp(i){
            console.log(i);
            var ul=document.getElementsByClassName('ul')
            var lis = ul[i].getElementsByTagName('li')
            // 返回元素相对带有定位父元素上方的偏移
            // console.log(lis);
            // console.log(ul.offsetTop,lis[6].offsetTop);
            ul[i].scrollTop = lis[3].offsetTop-ul[i].offsetTop
            // this.$refs.ul.scrollTo(0,300)
        },
        scrollDown(i){
            var ul=document.getElementsByClassName('ul')
            var lis = ul[i].getElementsByTagName('li')
            // 返回元素相对带有定位父元素上方的偏移
            // console.log(ul.offsetTop,lis[6].offsetTop);
            ul[i].scrollTop = -(lis[3].offsetTop-ul[i].offsetTop)
        },
        async getData(){
            var token = localStorage.getItem('token')
            // console.log(this);
            const {data:res} = await this.$http.get('/chat/GetallDaysPlan',{params:{chat:token,id:3}})
            console.log(res);
            // level 阶段  week 周  content 每天的计划目标
            var arrLevelAll = []
            var level = 1
            for(var i in res){
                var arrLevel = []
                for(var j in res){
                    if(res[j].level == level){
                        arrLevel.push(res[j])
                        delete res[j]
                    }
                }
                arrLevelAll.push(arrLevel)
                level+=1
            }
            // console.log(arrLevelAll);  // 按照level分好
            var arrweekAll = []
            for(var i = 0;i<arrLevelAll.length;i++){
                var arrweekItem = []
                var data = arrLevelAll[i] //每一阶段
                // console.log(data);

                for(var j in data){
                    var weektitle = data[j].week
                    // console.log(weektitle);
                    var weekItem = []

                    for(var k in data){
                        if(data[k].week==weektitle){
                            weekItem.push(data[k])
                            delete data[k]
                        }
                    }
                    
                    weekItem.sort((a,b)=>{
                        return a.orders - b.orders
                    })
                    // console.log(weekItem);
                    arrweekItem.push(weekItem)
                }
                arrweekAll.push(arrweekItem)
            }
            console.log(arrweekAll);
            this.textList=arrweekAll
        }
        
    },
    mounted(){
        // this.initActiveSpan()
        this.getData()
    }
}
</script>
<style scoped>
body[data-jihua-001]{
    width: 100%;
    height: 100%;
    background-color: #fff;
    margin: 0;
    padding: 0;
}
ul[data-jihua-001]{
    padding: 0;
    margin: 0;
}
li[data-jihua-001]{
    list-style: none;
}
a[data-jihua-001]{
    text-decoration: none;
    color: #000;
}
p[data-jihua-001]{
    margin: 0;
    font-size: 16px;
}
.main[data-jihua-001]{
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 10px;
    box-sizing: border-box;
}
.jihua-title[data-jihua-001]{
    height: 50px;
    line-height: 50px;
    text-align: center;
    padding: 15px 0;
    font-size: 40px;
}
.collapse[data-jihua-001]{
    width: 90%;
    height: 670px;
    padding: 0 20px;
    border: 1px solid #eee;
    background-color: #fff;
}
::v-deep .collapse{
    width: 100%;
    height: 100%;
    margin: 0 auto;
    color: #676576;
}
::v-deep .el-collapse{
    width: 100%;
    height: 100%;
    border-top: none;
    border-bottom: none;
}

::v-deep .el-collapse-item__content{
    padding: 0;
}
::v-deep .el-collapse-item__header{
    font-size: 26px;
    color: #676576;
    border-bottom: none;
}
::v-deep .el-icon-arrow-right:before{
    content:'+'
}
::v-deep .el-collapse-item__arrow.is-active{
    display: none;
}
::v-deep .el-collapse-item__arrow{
    font-weight: 600;
    transition:none;
}

::v-deep .el-collapse-item__wrap{
    border-bottom: none;
}
.collapse-main[data-jihua-001]{
    width: 100%;
    height: 280px;
}
.title[data-jihua-001]{
    height: 50px;
    width: 100%;
    line-height: 50px;
    font-size: 18px;
}
.jihua-main[data-jihua-001]{
    box-sizing: border-box;
    position: relative;
    display: flex;
    height: 280px;
    width: 100%;
    padding: 20px 0;
    background-color: #f8fafc;
}
.jihua-main-left[data-jihua-001]{
    box-sizing: border-box;
    width: 20%;
    height: 240px;
    padding: 0 10px;
    border-right: 1px solid #ddd;
    text-align: center;
    
}
::-webkit-scrollbar{
    width: 0;
    height: 0;
}
.up-c[data-jihua-001],
.down-c[data-jihua-001]{
    width: 100%;
    height: 50px;
    text-align: center;
    line-height: 67px;
}
.jihua-main-left ul[data-jihua-001]{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 140px;
    overflow-y: auto;
}

.left-tab[data-jihua-001]{
    height: 70px;
    width: 70%;
    line-height: 70px;
    text-align: center;
    font-size: 20px;
    color: #676576;
}
.left-tab span[data-jihua-001]{
    display: block;
    width: 100%;
    height: 100%;
}
.active[data-jihua-001]{
    border-radius: 10px;
    color: #fff;
    background-color: #f47600;
}
.jihua-main-right[data-jihua-001]{
    box-sizing: border-box;
    width: 80%;
    height: 380px;
    padding: 0 40px;
    overflow: hidden;
}
.right-text[data-jihua-001]{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow: auto;
}
.right-text[data-jihua-001]::-webkit-scrollbar{
    width: 10px;
    background-color: #f8fafc;
}
.right-text[data-jihua-001]::-webkit-scrollbar-thumb{
    border-radius: 5px;
    background-color: #d3d6d9;
}
.text-head[data-jihua-001]{
    padding-bottom: 5px;
    border-bottom: 1px solid #ddd;
}
.text-head-title[data-jihua-001]{
    font-size: 26px; 
    font-weight: 600;
}
.text-body[data-jihua-001]{
    box-sizing: border-box;
    padding-bottom: 5px;
}
.text-body-title[data-jihua-001]{
    font-size: 20px;
    font-weight: 600;
}
</style>